<?php if (!defined('THINK_PATH')) exit();?><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/movie/Movie_version_1.1/movie/Public/static/jquery-weui/lib/weui.min.css">
    <link rel="stylesheet" href="/movie/Movie_version_1.1/movie/Public/static/jquery-weui/css/jquery-weui.css">
    <link rel="stylesheet" href="/movie/Movie_version_1.1/movie/Public/static/bootstrap/css/bootstrap.min.css">
    <script src="/movie/Movie_version_1.1/movie/Public/static/jquery-weui/lib/jquery-2.1.4.js"></script>
    <script src="/movie/Movie_version_1.1/movie/Public/static/jquery-weui/js/jquery-weui.js"></script>
    <script src="/movie/Movie_version_1.1/movie/Public/static/jquery-weui/js/swiper.js"></script>

    <style>
        .cells{
            border-bottom: 1px solid #ccc;
        }
        .input1{
            text-align: right;
        }
        .weui_btn {
            font-family: 微软雅黑;
            max-width:90%;
        }
        .movie-order1{
            max-width:100%;
            padding-top: 20px;
            text-align: center;
            border-bottom-left-radius: 7px;
            border-bottom-right-radius: 7px;
            padding-bottom: 20px;
        }
        span{
            display: block;
        }
        .movie-order1 .span1{
            background: #4A4A4A;
            max-width:100%;
            display: block;
            color: #898989;
            padding: 5px;
        }
        .span2,.span3,.span4{
            font-family: 微软雅黑;
            font-weight: 600;
            line-height: 11px;;

        }
        .span2{
            margin-bottom: 10px;
        }
        .span4{
            margin-top:3px;
        }
        a:hover{text-decoration:none; }
        .margin{
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
            height: 130px;
        }
        .span5 ,.span6{
            margin-top: 20px;
            display: inline-block;
            border:1px solid #ccc;
            padding: 3px 5px;
            margin-bottom: 10px;
        }
        .SeatColumm{
            max-width:100%;
            height:400px;
            background: #f0f0f0;
            padding-top: 40px;
        }
        .hr{
            max-width:80%;
            border:1px solid #ccc;
            margin: 0 auto 20px;
        }
        .tables{
            max-width:80%;
            margin: 0 auto;
        }
        .tables tr td{
            width: 1%;
            height: 30px;
        }
        .tables tr td img{
            margin: 0 auto;
            display: inherit;
        }
        .event{
            background-color: #ccc;
            color:#a0a0a0!important ;
        }
        .event{ pointer-events: none; }
        .bb{
            max-width:50%;;
            margin:30px auto;
        }
    </style>

</head>
<body>
<div class="movie-order1">
    <b><span class="span2"><?php echo ($moviename); ?></span></b>
    <span class="span3"><?php echo ($message); echo ($time11); ?> <?php echo ($language); ?></span>
</div>

<div class="SeatColumm">
    <div class="hr"></div>
        <table cellspacing="0" cellpadding="3" class="tables">
            <!--利用多少行多少列来计算-->
            <?php
 for($i=1; $i<=$roo_seads[0]['row']; $i++){ echo '<tr>'; for($a=1; $a<=$roo_seads[0]['col']; $a++){ echo '<td><img class="img" data-row="'.$i.'" data-col="'.$a.'"  src="/movie/Movie_version_1.1/movie/Public/static/img/26-23.png" at="1"></td>'; } echo '</tr>'; } echo '</table>'; echo ($roo_seads['col']); ?>
        </table>
    <div class="bb">
        <span style="display: inline-block;"><img src="/movie/Movie_version_1.1/movie/Public/static/img/26-23.png"" alt=""> 未选</span>
        <span style="display: inline-block;"><img src="/movie/Movie_version_1.1/movie/Public/static/img/26-23-red.png"" alt=""> 已选</span>
        <span style="display: inline-block;"><img src="/movie/Movie_version_1.1/movie/Public/static/img/26-23-grenn.png"" alt=""> 已售</span>
    </div>
</div>
<div class="movie-order2">
    <a class="weui_btn weui_btn_primary button1 event" enable=false>确认选座</a>
</div>
<script>
/*    //隐藏第一排地4个座位
$('table').find('[data-row][data-col]').each(function (){
       if($(this).attr('data-col') == 3 && $(this).attr('data-row')==0){
           $(this).hide();
       }
    });*/
var loss =<?php echo ($loss); ?>;
for(var s =0;s<loss.length;s++){
    $('table').find('[data-row][data-col]').each(function (){
        var rows = $(this).attr('data-row');
        var cols = $(this).attr('data-col');

        if(rows+'-'+cols ==loss[s] ){
            $(this).hide();
        }
    });
}


    //点击作为显示确定  得到可以提交的按钮
$(function(){
    $('.img').click(function (){
        //如果座位已经卖出就不能点击了
        if($(this).attr('src') == '/movie/Movie_version_1.1/movie/Public/static/img/26-23-grenn.png'){
            return false;
        }
        if($(this).attr('at') == '1')
        {
            $(this).attr('src','/movie/Movie_version_1.1/movie/Public/static/img/26-23-red.png');
            $(this).attr('at','2');
        }else {
            $(this).attr('src','/movie/Movie_version_1.1/movie/Public/static/img/26-23.png');
            $(this).attr('at','1');
        }
        //必须在点击事件里面判断 他的属性是否是2
        if(ckec()){
            $('.event').removeClass('event');
        }else {
            $('.weui_btn').addClass('event');
        }
    })
});


    function  ckec(){
        //获取属性为2的  2->选中的时候属性
       var at = $(".img[at='2']");
        // at.length>0; 如果大于0代表最起码有一个被选中了 否则一个都没被选中
        var len = at.length>0;// 如果最起码有一个 被选中 就是大于1 返回true  否则返回false
        return len;
    }
    var sid =<?php echo $_SESSION['mobile']['data']['sid'];?>;
    //ajax 提交数据
$(function(){
    $('.weui_btn').click(function () {
        //声明一个数组
        var arr= new Array();
        //获取 图片属性 at=2  /代表 选中了
        var ats = $(".img[at='2']");
        //遍历选中的座位
        for(var i=0;i<ats.length;i++){

            // 拼接 坐标 把他压入数组中
            arr.push($(ats[i]).attr('data-row')+','+$(ats[i]).attr('data-col'))
        }

        // 提交数组
        $.ajax({
            type:'post',
            url:"<?php echo U('Order/ajax');?>",
            data:{'seat':arr,'sid':sid},
            datatype:'json',
            success:function(data){
               if(data ==1){
                   window.location.href="<?php echo U('Order/index');?>";
               }else {
                   $.alert("选择失败", function() {
                       window.location.href="";
                   });
               }

            },
        });
    })

    //加载页面的时候ajax请求 是否座位有被选中的
    $.ajax({
        type:'post',
        url:"<?php echo U('Sead/sellAjax');?>",
        data:{'name':sid},
        datatype:'json',
        success:function(data) {
            if(data !=null){
                var datas=eval(data);
                for (var j = 0; j < datas.length; j++) {
                    for(var s=0;s <datas[j].length;s++ ){
                        var r = datas[j][s].row;
                        var c = datas[j][s].col;
                        $(".img[data-row='" + r + "'][data-col='" + c + "']").attr('src','/movie/Movie_version_1.1/movie/Public/static/img/26-23-grenn.png');
                    }
                }
            }else{
                alert(1);
            }
        },

    });
});

</script>
</body>
</html>